<template>
    <el-col :span="24">
        <el-row>
            <el-card style="width: 100%">
                <template #header>
                    <div class="card-header">
                        <span>{{ getdata.name }}/{{ userId }}</span>
                    </div>
                </template>
                <el-row>
                    <el-col :span="8">
                        <p class="largesize">线索创建时间</p>
                        <p class="smallsize">{{ getdata.createTime }}</p>
                    </el-col>
                    <el-col :span="8">
                        <p class="largesize">客户手机号码</p>
                        <p class="smallsize">{{ getdata.phone }}</p>
                    </el-col>
                    <el-col :span="8">
                        <p class="largesize">渠道来源</p>
                        <p class="smallsize">{{ getdata.channelId }}</p>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <p class="largesize">线索分配者</p>
                        <p class="smallsize">{{ getdata.createBy }}</p>
                    </el-col>
                    <el-col :span="8">
                        <p class="largesize">线索归属时间</p>
                        <p class="smallsize">{{ getdata.updateTime }}</p>
                    </el-col>
                    <el-col :span="8">
                        <p class="largesize">线索归属人</p>
                        <p class="smallsize">{{ getdata.createBy }}</p>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <p class="largesize">所属促销活动信息</p>
                        <p class="smallsize">/</p>
                    </el-col>
                    <el-col :span="8">

                    </el-col>
                    <el-col :span="8">
                        <el-button type="danger" @click="wxss">无效线索</el-button>
                        <el-button type="primary" @click="zwsj">转为商机</el-button>
                    </el-col>
                </el-row>
            </el-card>
        </el-row>

        <el-row>
            <el-card style="width: 100%">
                <template #header>
                    <div class="card-header">
                        <span>线索跟进</span>
                    </div>
                </template>
                <el-row>
                    <el-col :span="8">
                        <p class="largesize">客户姓名</p>
                        <el-input v-model="followinfo.name" style="width: 240px" placeholder="客户姓名" />
                    </el-col>
                    <el-col :span="8">
                        <p class="largesize">性别</p>
                        <el-select v-model="followinfo.gender" placeholder="请选择性别" style="width: 240px">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-col>
                    <el-col :span="8">
                        <p class="largesize">年龄</p>
                        <el-input-number v-model="followinfo.age" :min="1" :max="100" />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <p class="largesize">客户微信号码</p>
                        <el-input v-model="followinfo.weixin" style="width: 240px" placeholder="Please input" />
                    </el-col>
                    <el-col :span="8">
                        <p class="largesize">客户QQ号码</p>
                        <el-input v-model="followinfo.qq" style="width: 240px" placeholder="Please input" />
                    </el-col>
                    <el-col :span="8">
                        <p class="largesize">客户手机号码</p>
                        <el-input v-model="followinfo.phone" style="width: 240px" placeholder="Please input" />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <p class="largesize">客户意向等级</p>
                        <el-radio-group v-model="followinfo.level">
                            <el-radio :label="1" :value="1">近期报名</el-radio>
                            <el-radio :label="2" :value="2">打算报名，考虑中</el-radio>
                            <el-radio :label="3" :value="3">了解一下</el-radio>
                            <el-radio :label="4" :value="4">打酱油</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <p class="largesize">客户意向类型</p>
                        <el-radio-group v-model="followinfo.subject">
                            <el-radio :label="1" :value="1">舞蹈类</el-radio>
                            <el-radio :label="2" :value="2">游泳类</el-radio>
                            <el-radio :label="3" :value="3">拳击类</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <p class="largesize">跟进记录</p>
                        <el-input v-model="followinfo.record" style="width: 240px" :rows="2" type="textarea"
                            placeholder="请输入内容" />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <p class="largesize">下次跟进时间</p>
                        <div class="block">
                            <el-date-picker v-model="createt1" type="datetime" placeholder="Select date and time" />
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">

                    </el-col>
                    <el-col :span="8">

                    </el-col>
                    <el-col :span="8">
                        <el-button type="primary" @click="tj">提交</el-button>
                        <el-button @click="returncl">返回</el-button>
                    </el-col>
                </el-row>
            </el-card>
        </el-row>
    </el-col>
    <!-- 无效线索 -->
    <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
        <el-form :model="form">
            <el-form-item label="原因" :label-width="formLabelWidth">
                <el-select v-model="remake" placeholder="请选择原因">
                    <el-option label="空号" value="空号" />
                    <el-option label="停机" value="停机" />
                    <el-option label="无法联系" value="无法联系" />
                    <el-option label="其他" value="其他" />
                </el-select>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="remake1" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="wxxstj">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
onMounted(() => {
    getData();
});
const dialogFormVisible = ref(false);
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const userId = route.params.id; // 获取路径参数

import { getxsdata, tjgj, fswxxs, changesj } from '@/api/clue/getIndex';
import { onMounted, reactive, ref, watch } from 'vue';
const getdata = reactive({});
let createt = '';
let createt1 = '';
const getData = () => {
    getxsdata(userId).then(res => {
        console.log(res);
        Object.assign(getdata, res.data);
        console.log(getdata);
        createt = res.data.createTime;
    });
};
const returnclue = () => {
    window.history.go(-1);
};

const followinfo = reactive({
    activityInfo: '',
    activityName: '',
    age: 18,
    allocator: '',
    belongTime: '',
    channelName: '',
    clueId: userId,
    createTime: createt,
    failCount: 0,
    gender: 1,
    level: 0,
    name: '',
    nextTime: '2024-11-29 15:23:14',
    owner: 'admin',
    phone: '',
    qq: '',
    record: '',
    status: 0,
    subject: 0,
    weixin: ''
});
const options = [
    {
        value: 0,
        label: '男',
    },
    {
        value: 1,
        label: '女',
    },
    {
        value: 3,
        label: '未知',
    }
];
const tj = () => {
    tjgj(followinfo).then(res => {
        console.log(res);
        if (res.code !== 200) ElMessage.error('提交失败');
        ElMessage.success('添加成功');
        router.push({ path: '/clue' });
    });
};
const returncl = () => {
    window.history.go(-1);
};
const remake = ref('');
const remake1 = ref('');

const wxss = () => {
    dialogFormVisible.value = true;
    console.log(111);

};
const wxxstj = () => {
    console.log(111);
    dialogFormVisible.value = false;
    fswxxs(followinfo).then(res => {
        console.log(res);
    })
};
watch(() => remake.value, (newVal, oldVal) => {
    followinfo.record = newVal + ":" + remake1.value;
});
watch(() => remake1.value, (newVal, oldVal) => {
    followinfo.record = newVal + ":" + remake1.value;
});

const zwsj = () => {
    ElMessageBox.confirm(
        '是否将当前线索转为客户?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            changesj(userId).then(res => {
                console.log(res);
                router.push({ path: '/clue' });
            })
            ElMessage({
                type: 'success',
                message: 'Delete completed',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
</script>

<style lang="scss" scoped>
.head {
    padding-left: 10px;
}

.headtitle {
    margin-top: 10px;
}

.oneh {
    margin-top: 20px;
    display: flex;
}

.headinfo {
    padding-left: 20px;
}

.createtime {
    margin-right: 40px;
}

.twoh {
    margin-top: 30px;
}

.xsgj {
    margin-top: 30px;
    padding-left: 10px;
}

.largesize {
    font-size: 20px;
}

.smallsize {
    color: #999;
}

.el-row {
    margin-bottom: 20px;
}
</style>